<template>
  <div>API
    <h3>{{msg}}|{{count}}</h3>
    <!-- 绑定数据 -->
    <a v-bind:href="url">{{count}}</a>
    <a :href="url">{{count}}</a>
    <button v-on:click="selectCountHandler">button</button>
    <button @click="selectCountHandler">@button</button>

    <hr>
    <ul>
      <li v-for="(item,index) in names " :key='index'>{{item}}</li>
    </ul>
    <button @click="addNames">增加</button>

    <hr>
    <div>
      <h3>|计算属性</h3>
      {{getMsg}}
    </div>
    <p>
      <!-- 变颜色 -->
      <div :class="{active:isActive}">helloisActive</div>
      <button @click="isActive=!isActive">变颜色</button>
    </p>
    <div>
      <hr>
    </div>
  </div>
</template>

<script>
  export default {
    name: "APIdemo",
    data() {
      return {
        isActive: false,
        count: 0,
        msg: "APIdmo vue",
        url: 'http://www.baidu.com',
        names: ["zs", "lisi", "wanwu"]
      }
    },
    methods: {
      selectCountHandler() {
        this.count += 1
      },
      addNames() {
        // this.names.push("zhaoliu")
        // 下面这个无法更新页面
        let currentName = ["wusi", "wus"];
        this.names.concat(currentName)
      }
    },
    computed: {
      getMsg() {
        return this.msg.split('').reverse().join("")
      }
    }
  }
</script>

<style>
  .active {
    color: blue;
  }
</style>
